<template>
  <div class="b-s w-10 f-48">
    <!--====================关于我们==========================-->
    <div class="block-ct">
      <div class="flex-c jc-sb title item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>关于我们</div>
          <div class="f-39 img-ct" @click="navToEditBase">
            <img src="/static/images/edit.png" class="edit-icon">编辑
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>参保人</div>
          <div class="f-39 img-ct">
            {{accountInfo.username}}
          </div>
        </div>
      </div>
       <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>参保地区</div>
          <div class="f-39 img-ct">
             {{accountInfo.businessCity}}{{accountInfo.businessTtown}}
          </div>
        </div>
      </div>
       <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>邮箱地址</div>
          <div class="f-39 img-ct">
             {{accountInfo.email}}
          </div>
        </div>
      </div>
    </div>
    <!--======================参保信息=============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb title item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>参保信息</div>
          <div class="f-39 img-ct" @click="navToEditSocial">
            <img src="/static/images/edit.png" class="edit-icon">编辑
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>身份证</div>
          <div class="f-39 img-ct">
            {{accountInfo.idcardNumber}}
          </div>
        </div>
      </div>
       <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>户口类型</div>
          <div class="f-39 img-ct">
              {{accountInfo.residenceType|residenceTypeFilter}}
          </div>
        </div>
      </div>
    </div>
    <!--=======================缴纳社保============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>缴纳社保</div>
          <div class="f-39 c-green img-ct">
            缴纳
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>社保基数</div>
          <div class="f-39 img-ct">
            ￥{{oOrderDetail.sbBaseMoney}}
          </div>
        </div>
      </div>
       <div class="line"></div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>缴纳月份</div>
          <div class="f-39 img-ct">
             {{oOrderDetail.sbBeginMonth}}至{{oOrderDetail.sbBeginMonth}}
          </div>
        </div>
        <div class="flex-c jc-sb c-a5 last-item">
        社保订单已生成，请前往代付订单查看
        </div>
      </div>
    </div>
    <!--=======================缴纳公积金============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>缴纳公积金</div>
          <div class="f-39 c-green img-ct">
            缴纳
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>公积金基数</div>
          <div class="f-39 img-ct">
            ￥{{oOrderDetail.gjjBaseMoney}}
          </div>
        </div>
      </div>
       <div class="line"></div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>缴纳月份</div>
          <div class="f-39 img-ct">
              {{oOrderDetail.gjjBeginMonth}}至{{oOrderDetail.gjjEndMonth}}
          </div>
        </div>
        <div class="flex-c jc-sb c-a5 last-item">
        公积金订单已生成，请前往代付订单查看
        </div>
      </div>
    </div>
    <!--=======================代发工资============================-->
    <div class="block-ct">
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>代发工资</div>
          <div class="f-39 c-green img-ct">
            代发
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>工资金额</div>
          <div class="f-39 img-ct">
             ￥{{oOrderDetail.gzBaseMoney}}
          </div>
        </div>
      </div>
       <div class="line"></div>
      <div class="flex-c jc-sb item-ct">
        <div class="flex-c jc-sb name-ct">
          <div>发薪日期</div>
          <div class="f-39 img-ct">
             {{oOrderDetail.gzBeginMonth}}至{{oOrderDetail.gzEndMonth}}
          </div>
        </div>
      </div>
       <div class="line"></div>
      <div class="s-item">
        <div class="flex-c jc-sb">
          <div>薪资月份/个税月份</div>
          <div class="f-39 img-ct">
            {{oOrderDetail.gzBeginMonth}}/{{oOrderDetail.gzEndMonth}}
          </div>
        </div>
        <div class="flex-c jc-sb c-a5 last-item">
        工资订单已生成，请前往代付订单查看
        </div>
      </div>
    </div>
    <!--===================================================-->
    <div class="w-10 btn-ct">
      <div class="cm-btn login-btn" @click="flogout">查看代付订单</div>
    </div>
    <commonFooter></commonFooter>
  </div>
</template>

<script>
import sowingMap from '@/components/common/sowingMap'
import commonFooter from '@/components/common/commonFooter'
import { mixinParams } from '@/vmixin/vmixin'
import {getAccountInfo, getOrderList} from '@/service'
export default {
  data () {
    return {
      accountInfo: {}, // 账户信息
      oOrderDetail: {},
      selectedIndex: 1,
      memberPhone: ''
    }
  },
  created () {
    this.getAccountInfo()
    this.getOrderList()
  },
  mounted () {},
  filters: {
    // 1:本地城镇 2:本地农村 3:外地城镇 4:外地农村 5:外籍人员
    residenceTypeFilter (input) {
      let aType = [
        '',
        '本地城镇',
        '本地农村',
        '外地城镇',
        '外地农村',
        '外籍人员'
      ]
      return aType[input] || ''
    }
  },
  mixins: [mixinParams],
  components: {
    sowingMap,
    commonFooter
  },

  computed: {
    // 将获取的数据按照A-Z字母开头排序
    sortgroupcity () {
      let sortobj = {}
      return sortobj
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    navToEditBase () {
      this.navTo('/editbaseinfo')
    },
    navToEditSocial () {
      this.navTo('/editsocialinfo')
    },
    async getAccountInfo () {
      let {userInfo} = this
      let oParams = {
        mobile: userInfo.mobile,
        cdkey: this.getCdkey()
      }
      let {result, values: accountInfo = {}} = await getAccountInfo(oParams)
      console.log('accountResult=======', accountInfo, result)
      this.accountInfo = accountInfo
    },
    async getOrderList () {
      let oParams = {
        mobile: this.userInfo.mobile,
        cdkey: this.getCdkey()
      }
      let { values = {} } = await getOrderList(oParams)
      this.oOrderDetail = values[0] || {}
    },
    // 退出登录
    flogout () {
      console.log('退出登录')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.block-ct {
  margin-bottom: cmSize(40);
  background: #ffffff;
}
.edit-icon {
  width: cmSize(50);
  height: cmSize(50);
  vertical-align: middle;
  padding-right: cmSize(20);
}
.item-ct {
  height: cmSize(160);
  padding: 0 cmSize(60);
}
.name-ct {
          height: cmSize(160);
          flex: 1 1 3rem;
}
.s-item{
   padding:cmSize(40) cmSize(60);
   height: auto;
}
.last-item{
 padding: cmSize(10) 0;
}

.c-green {
  color: #69c16a;
}
.title {
  background-color: #69c16a;
  color: #ffffff;
  height: cmSize(120);
}
.line {
  border-bottom: 1px solid #eeeeee;
  width: 100%;
}
.btn-ct{
    padding: cmSize(60);
    margin-bottom: cmSize(140);
}
</style>
